<template>
  <div class="webrtc">
    <el-scrollbar class="wertc-scrollbar" wrap-class="wertc-scrollbar__wrap">
      <el-form
        :model="form"
        size="small"
        label-width="100px"
        :hide-required-asterisk="true"
        :rules="rules"
        ref="form"
      >
        <el-form-item :label="$t('m.AVAILABLE_OR_NOT')" prop="enabled">
          <el-switch
            v-model="form.enabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-text="$t('m.ON')"
            :inactive-text="$t('m.OFF')"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item :label="$t('m.USER_TEL')" prop="phone">
          <!-- <el-input v-model="form.phone" disabled readonly /> -->
          <label style="color:white">{{form.phone}}</label>
        </el-form-item>
        <el-form-item :label="$t('m.TEL_TYPE')" prop="phoneType">
          <!-- <el-input :value="telType === 'phone' ? '手柄' : '手咪'" disabled readonly /> -->
          <label
            style="color:white"
          >{{telType === 'phone' ? $t('m.dict.deviceTypeOptions')['phone'] : $t('m.dict.deviceTypeOptions')['hand_microphone'] }}</label>
        </el-form-item>
        <el-form-item :label="$t('m.USER_PASSWORD')" prop="password">
          <el-input type="password" v-model="form.password" />
        </el-form-item>
        <!-- <el-form-item label="SIP服务器：" prop="sipHost">
          <el-input v-model="form.sipHost" />
        </el-form-item>
        <el-form-item label="SIP端口：" prop="sipPort">
          <el-input v-model="form.sipPort" />
        </el-form-item>-->
        <!-- <el-form-item label="WS服务器：" prop="wsHost">
          <el-input v-model="form.wsHost" />
        </el-form-item>
        <el-form-item label="WS端口：" prop="wsPort">
          <el-input v-model="form.wsPort" />
        </el-form-item>-->
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
import Webrtc2Sip from '@/utils/Webrtc2Sip'

import { webrtcList, webrtcAdd, webrtcEdit } from '@/api/webrtc'
export default {
  props: {
    operator: Object,
    telProp: String,
    telType: String,
  },
  data() {
    return {
      form: {
        enabled: 0, // 是否启用
        operatorID: '', // 操作员ID
        phone: this.operator[this.telProp], // 操作号码
        phoneType: this.telType,
      },
      typeOptions: [
        { value: 'hand_microphone', label: '手咪' },
        { value: 'phone', label: '手柄' },
      ],
      rules: {
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{1,}$/, message: '只支持字母和数字' },
        ],
        sipHost: [
          { required: true, message: '请输入SIP服务器IP', trigger: 'blur' },
          {
            pattern: /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9]).){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/,
            message: 'IP格式错误',
          },
        ],
        sipPort: [
          { required: true, message: '请输入SIP端口', trigger: 'blur' },
          {
            pattern: /^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/,
            message: '请输入0-65535范围内的数字',
          },
        ],
        wsHost: [
          { required: true, message: '请输入WS服务器IP', trigger: 'blur' },
          {
            pattern: /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9]).){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/,
            message: 'IP格式错误',
          },
        ],
        wsPort: [
          { required: true, message: '请输入WS端口', trigger: 'blur' },
          {
            pattern: /^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/,
            message: '请输入0-65535范围内的数字',
          },
        ],
      },
    }
  },
  methods: {
    // 保存
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (!navigator.getUserMedia && !navigator.webkitGetUserMedia) {
            return this.$message({
              duration: 3000,
              type: 'error',
              message: '无法获取摄像头或麦克风',
            })
          }
          console.log('handleSubmit', JSON.stringify(this.form))
          if (this.form.id) {
            webrtcEdit(this.form).then((res) => {
              this.$emit('close')
              let webrtc2Sip = Webrtc2Sip.getWebrtc2SipByName(this.form.phone)
              if (this.form.enabled) {
                if (!webrtc2Sip) {
                  webrtc2Sip = new Webrtc2Sip()
                  webrtc2Sip.register(this.form)
                }
              } else if (webrtc2Sip) {
                webrtc2Sip.unRegister()
              }
            })
          } else {
            webrtcAdd(this.form).then((res) => {
              this.$emit('close')
              let webrtc2Sip = Webrtc2Sip.getWebrtc2SipByName(this.form.phone)
              if (this.form.enabled) {
                if (!webrtc2Sip) {
                  webrtc2Sip = new Webrtc2Sip()
                  webrtc2Sip.register(this.form)
                }
              } else if (webrtc2Sip) {
                webrtc2Sip.unRegister()
              }
            })
          }
        }
      })
    },
    //判断软电话是否启用
  },
  mounted() {
    // 获取软电话
    webrtcList().then((res) => {
      let list = res.data.eventdata
      for (let index = 0; index < list.length; index++) {
        const webrtcInfo = list[index]
        if (
          webrtcInfo.phone === this.operator[this.telProp] &&
          webrtcInfo.operatorID === this.operator.operatorID
        ) {
          this.form = webrtcInfo
        }
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.webrtc {
  height: 100%;
  .wertc-scrollbar {
    height: 100%;
  }
  /deep/.wertc-scrollbar__wrap {
    width: auto;
    overflow-x: hidden;
    margin-right: -20px !important;
  }
  .el-form {
    .el-form-item {
      /deep/.el-form-item__label {
        color: #fff;
      }
      /deep/.el-input__inner {
        width: 90%;
        background-color: #1a4969;
        color: #fff;
      }
      /deep/.el-switch__label {
        color: #fff;
        &.is-active {
          color: #13ce66;
        }
      }
    }
  }
}
</style>